<!--
 * @Author: hu_binbin
 * @Date: 2021-06-22 09:00:12
 * @LastEditTime: 2021-07-28 20:12:39
 * @Description: 
-->
<template>
	<article class="bg_4dbfae homeIndex">
		<van-nav-bar title="全部待办任务" @click-left="back"  left-arrow>
            <template slot="right">
                <div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template>
        </van-nav-bar>

        <div class="search">
            <div class="search-left">任务名称：</div>
            <van-search class="search-right" v-model="searchName" clearable shape="round" @input="onSearch"  @cancel="onCancel"
            background="#F5F6FA" placeholder="请输入搜索内容">
            </van-search>
        </div>

        <div class="screen-time">
            <div class="time-start">时间：</div>
            <div class="time-left" style="margin-left: 10px;">
                <div>{{startTime}}</div>
                <img :src="iocn.time" @click="onClickRightIcon('sTime')" style="width: 30px;"/>
            </div>
            <div class="time-right">
                <div class="border"></div>
            </div>
            <div class="time-left" style="margin-right: 3%;">
                <div>{{endTime}}</div>
                <img :src="iocn.time" @click="onClickRightIcon('eTime')" style="width: 30px;"/>
            </div>
        </div>
        <!-- 任务列表 -->
        <div class="taskList">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="loading" 
                offset="0"
                :finished="finished"
                finished-text="没有更多了"
				@load="onLoad"
                >
                    <van-cell class="list" icon="stop" :title="taskName(item)"
                      :label="formatTime(item.requireFinishTime)"
                      v-for="(item,index) in taskList"
                      :key="index">
                      <div solt="value">
                        <van-button style="width:60px;"
                          type="primary"
                          size="small"
                          round
                          color="#17B49B"
                          @click="excuteTask(item)" 
                          >
                          执行
                        </van-button>  
                      </div>
                    </van-cell>
                  </van-list>
            </van-pull-refresh>
        </div>
        <!-- pop start-->
		<van-popup round v-model="isDatePicker" position="bottom">
			<!-- 时间类型选择器 -->
			<van-datetime-picker v-model="currentDate" title="选择时间" 
            :min-date="minDate"
			:formatter="formatter"
  			:max-date="maxDate"
            @confirm="onConfirm" @cancel="cancel('showPicker2')" type="datetime">
			</van-datetime-picker>
		</van-popup>
	</article>
</template>

<script type="text/javascript">
    import {queryUnfinishTourTask} from "../../api/tourTask"
    import Util from "@/utils/util"
    import {mapGetters} from 'vuex'
	export default {
		name: 'MainHome',
		data() {
			return {
                searchName: "",
                taskList: [],
                finished: false,
                loading: false,
                refreshing:false,
                iocn: {
                    "time": require("@assets/img/mainIndex/time.png"),
                },
                timeType: 'sTime',// 默认 开始时间
                isDatePicker: false,
                currentDate: new Date(),//当前时间
                startTime: "开始时间",//开始时间
                endTime: "结束时间",//结束时间
                userId: "",
                pageNum: 0,//当前页数
                pageSize: 9,//每页条数
                //subId: "",
                minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
				maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay()),
                flag:false,
			}
		},
		
		computed: {
            ...mapGetters(["subId","subName"]),
			taskName() {
				return function(item) {
					var str = item.taskType + " - ";
					str += item.voltLevel ? item.voltLevel : "";
					str += item.substationName ? item.substationName : "";
					return  str;
				}
			},
			formatTime() {
				return function(val) {
					return Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd')
				}
			}
		},
		
        methods: {
            //日期格式
			formatter(type, val) {
				if (type === 'year') {
					return val + '年';
				}
				if (type === 'month') {
					return val + '月';
				}
				if (type === 'day') {
					return val + '日';
				}
				if (type === 'hour') {
					return val + '时';
				}
				if (type === 'minute') {
					return val + '分';
				}
				return val;
			},
            /**
             * @description: 任务名称搜索
             */
            onSearch() {
                this.pageNum = 1;
                this.taskList = [];
                this.queryUnFinishTaskList();
            },
            /**
             * @description: 列表下拉刷新
             * @param {*}
             * @return {*}
             */
            onRefresh() {
                this.finished = false;
                this.pageNum = 1;
                this.taskList = [];
                this.queryUnFinishTaskList();
            },
            //搜索内容清空
            onCancel() {
                this.searchName = "";
                this.finished = true;
                this.pageNum = 1;
                this.taskList = [];
                this.queryUnFinishTaskList();
            },
            /**
             * @description: 查询未完成任务列表 
             */
            queryUnFinishTaskList() {
                if(this.flag) {//防重复
                    return ;
                }
                this.flag = true;
                var self = this,startTime="",endTime="";
                this.startTime == "开始时间" ? "" :this.startTime;
                this.endTime == "结束时间" ? "" : this.endTime;
                if(this.startTime && this.endTime) {
                    startTime = new Date(this.startTime).getTime();
                    endTime = new Date(this.endTime).getTime();
                    if(startTime > endTime) {
                        this.$Toast.fail("开始时间不能大于结束时间!")
                        return;
                    }
                }
				var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    substationId: this.subId,//变电站id
                    roleCode: "",
					userId: this.userInfo.userId,
                };
                if(startTime && endTime) {
                    params.startTime = startTime;//开始时间
                    params.endTime = endTime;//结束时间
                }
                if(this.searchName) {//任务名称
                    params.name = this.searchName;
                }
				this.$Toast.loading({
						duration: 0,//展示时长 0不会消失
						message: "巡视任务查询中...",
						forbidClick: true,//是否禁止背景点击
						overlay: true//是否显示背景遮罩层
					})
                queryUnfinishTourTask(params).then(data => {
                    self.flag = false;
                    self.$Toast.clear();
                    if(self.refreshing){
						self.refreshing = false
                    }
                    self.pageNum = data.pageInfo.pageNum;//当前页数
					console.log("data.pageInfo.pageNum",data.pageInfo.pageNum)
					if(self.pageNum == data.pageInfo.pages || data.pageInfo.pages == 0) {
						self.finished = true
					}
					self.loading = false;//加载完成
					if(data.success) {
						self.$Toast.success(data.msg)
						self.taskList.push(...data.data);
					}else{
                        self.$Toast.fail(data.msg)
                        self.taskList = [];
					}
				}).catch(err => {
                    self.flag = false;
                    self.$Toast.fail(err)
                    self.taskList = [];
				})
            },
            /**
             * @description: 执行任务
             * @param {*}
             * @return {*}
             */
            excuteTask(taskInfo) {
                console.log("taskInfo",taskInfo.voltLevel)
                if(taskInfo.voltLevel) {
					this.$router.push({"name":"beginIndex",params:{
						taskInfo: taskInfo
					}})
				}else{
					this.$router.push({"name":"addProtect",params:{
						taskInfo: taskInfo
					}})
				}
            },
            back() {
                this.$router.back()
            },
            //选择时间
            onConfirm(val){
				this.isDatePicker = false;
            	var time = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd')
				if(this.timeType == 'sTime'){//开始时间
					this.startTime = time;
				}else{//结束时间
					this.endTime = time;
                }
                if(this.startTime != "开始时间" && this.endTime != "结束时间") {
                    this.taskList = [];
                    this.queryUnFinishTaskList();
                }
            },
            cancel(){
				this.isDatePicker = false;
            },
            /**
             * @description: 日期确认
             * @param {*} data
             * @return {*}
             */
            onClickRightIcon(data){
				this.timeType = data;
                this.isDatePicker=true;
            },
            /**
			* @description: 上拉加载更多数据
			* @param {*}
			* @return {*}
			*/
			onLoad() {
				this.pageNum++;
				this.queryUnFinishTaskList();
			},
        },
		watch: {
			
		},
		mounted() {
            //this.subId = this.$route.params.subId;
            //console.log("this.subId",this.subId)
        },
        created() {
            var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
        }
	}
</script>

<style scoped>
    article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #f5f6fa !important;
	}
    .homeIndex /deep/ .van-grid-item__content{
		background: #fff !important;
	}
    .search{
        display: flex;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
    }
    .search .search-left {
        width: 70px;
        text-align: right;
        font-size: 14px;
    }
    .search .search-right{
        flex:1;
    }
    /deep/ .van-search__content{
        background: #fff;
    }
    .screen-time{
        display: flex;
        margin: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        align-items: center;
        justify-content: center;
    }
    .time-start{
        width: 70px;;
        font-size: 14px;
        text-align: right;
    }
    .time-left{
        display: flex;
        width: 27%;
        justify-content: space-between;
        height: 35px;
        align-items: center;
        background: #fff;
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .time-left div {
        font-size: 12px;
    }
    .time-right{
        flex:1;
        text-align: -webkit-center;
    }
    .border{
        width: 10px;
        border: 0.5px solid grey;
        position: relative;
    }
    .list /deep/ .van-button{
		width: 60px;
	}
    .taskList {
        overflow-y: auto;
        background: #fff;
        margin-left: 10px;
        margin-right: 10px;
        height: calc(100% - 168px);
    }
</style>
